<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="输入文章标题" class="search"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
            <div>
                <el-table :data="page.content" border fit>
                    <el-table-column label="图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" style="width:100%;height:100%" />
                        </template>
                    </el-table-column>
                    <el-table-column label="标题" prop="title"></el-table-column>
                    <el-table-column label="作者" prop="author"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="put(scope.row)">编辑</el-button>
                            <el-button @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page="page.number+1" layout="total,  prev, pager, next, jumper" :total="page.totalElements">
                </el-pagination>
            </div>

        </div>
    </div>
</template>
<script>
import { allArticle, delArticle } from '../../server/getDate.js'
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            select_word: ''
        }
    },
    created() {
        this.getList()
    },
    computed: mapState({
        page: state => state.Article.result,
        user: state => state.Login.user
    }),
    methods: {
        ...mapActions(['save_list', 'save_article']),
        handleCurrentChange(val) {
            console.log(val)
            let field = 'title'
            let keyword = this.select_word
            let index = val
            let size = this.page.size
            allArticle({ field, keyword, index, size })
                .then(res => {
                    if (res.status === 0) {
                        this.save_list(res)
                    } else {
                        this.$message.error(res.message)
                    }
                }, err => this.$message.error(res.message))
        },
        getList() {
            const self = this
            allArticle()
                .then(res => {
                    if (res.status === 0) {
                        self.save_list(res)
                    } else {
                        self.$message.error(res.message)
                    }
                }, err => { self.$message.error(res.message) })
        },
        search() {
            let index = this.page.number + 1
            this.handleCurrentChange(index)
        },
        del(id) {
            console.log(id)
            let userId = this.user.id
            delArticle({ id, userId })
                .then(res => {
                    if (res.status === 0) {
                        this.$message.info('删除成功')
                        this.getList()
                    } else {
                        this.$message.error('删除失败')
                    }
                }, err => this.$message.error('删除失败'))
        },
        put(row) {
            console.log('row', row)
            this.save_article(row)
            this.$router.push({
                path: '/article'
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>
